<!--
 @description 客户-退回门店
 @fileName index.vue
 @author zengqiongying
 @created 2022/11/09 10:04:40
-->
<template>
  <div class="page-has-bottom bg_gray">
    <ComHeader title="退回门店" bg-color="#FAFBFE" />
    <div class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" :disabled="!enbleSubmit" @click="handlerConfirm">确定</van-button>
    </div>
    <div class="tip">
      客户退回门店后，该客户信息将不在您的客户列表中显示；您的上级可在【公共客户池】-待分配客户表中重新分配客户！
    </div>
    <!-- <div class="reason-list">
      <div class="title">请选择退回原因：</div>
      <div v-for="(item,i) in reasonList" :key="i" class="l-row" :class="{'selected':item.dictCode===returnReason}" @click="handleClick(item.dictCode)">
        <span>{{ item.dictName }}</span>
        <img v-if="item.dictCode===returnReason" class="icon-sel" src="@/assets/icon-yes.png">
      </div>
    </div> -->
    <div class="remark-box">
      <FieldPicker
        v-model="formData.returnReason"
        title="退回原因"
        placeholder="请选择(必选)"
        :url="`/data-dict/app/v2/dictionary/CRM_CUSTOMER_RETURN_STORE`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="{ query: { appCode: 'top2-crm', domainCode: 'marketing' }, type: 0 }"
        required
      />
      <template v-if="showAddress">
        <FieldArea
          v-model="areaData"
          title="所在地区"
          :option="areaOption"
          required
        />
        <Cell
          v-model="formData.detailedAddress"
          title="详细地址"
          placeholder="请输入详细地址"
          :right="false"
          is-input
          required
        />
      </template>
      <Cell
        v-model="formData.remark"
        title="备注"
        placeholder="请输入"
        :right="false"
        is-input
      />
    </div>
  </div>
</template>

<script>
import { bus } from '@/utils/bus'
import { getDictList } from '@/apis/dataDict'
import { returnShop } from '@/apis/customer'
import Cell from '@/components/ListCell'
import FieldPicker from '@/components/FieldPicker'
import FieldArea from '@/components/FieldArea'
export default {
  name: 'CustomerSendBackShop',
  components: { Cell, FieldPicker, FieldArea },
  data() {
    return {
      clueCustomerId: this.$route.query.id,
      reasonList: [],
      formData: {
        returnReason: '',
        detailedAddress: '',
        remark: ''
      },
      areaData: {
        provinceCode: '',
        provinceName: '',
        provinceId: '',
        cityCode: '',
        cityName: '',
        cityId: '',
        districtsCode: '',
        districtsName: '',
        districtsId: '',
        streetCode: '',
        streetName: '',
        streetId: ''
      },
      areaOption: {
        provinceId: 'provinceId',
        province: 'provinceName',
        provinceCode: 'provinceCode',
        cityId: 'cityId',
        city: 'cityName',
        cityCode: 'cityCode',
        districtId: 'districtsId',
        district: 'districtsName',
        districtCode: 'districtsCode',
        townId: 'streetId',
        town: 'streetName',
        townCode: 'streetCode'
      }
    }
  },

  computed: {
    enbleSubmit() {
      return !!this.formData.returnReason
    },
    showAddress() {
      return this.formData.returnReason === 'AddressError'
    }
  },
  watch: {
    showAddress(v) {
      if (!v) {
        this.$set(this.formData, 'detailedAddress', '')
        this.areaData = {
          provinceCode: '',
          provinceName: '',
          provinceId: '',
          cityCode: '',
          cityName: '',
          cityId: '',
          districtsCode: '',
          districtsName: '',
          districtsId: '',
          streetCode: '',
          streetName: '',
          streetId: ''
        }
      }
    }
  },

  async created() {
    // this.reasonList = await getDictList('CRM_CUSTOMER_RETURN_STORE')
  },
  activated() {},

  mounted() {},

  methods: {
    handleClick(v) {
      this.returnReason = v
    },
    handlerConfirm() {
      if (!this.formData.returnReason) {
        this.$toast('请选择退回原因')
        return
      }
      if (this.showAddress) {
        if (!this.areaData.streetCode) {
          this.$toast('请选择地区')
          return
        }
        if (!this.formData.detailedAddress) {
          this.$toast('请填写详细地址')
          return
        }
      }
      const formData = this.showAddress ? { ...this.formData, ...this.areaData } : this.formData
      const data = {
        clueCustomerId: this.clueCustomerId,
        ...formData
      }
      return returnShop(data).then(res => {
        this.$toast('操作成功!')
        bus.$emit('refreshCustomerItem', {
          title: '客户退回门店',
          type: 'sendBackShop',
          id: this.clueCustomerId
        })
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>
.tip{
  padding: 16px 16px;
  line-height: 20px;
  font-size: 12px;
  color: #999;
}
.remark-box{
  margin-top: 20px;
  background: #fff;
}
.reason-list{
  background: #fff;
  padding:0 16px 16px;
  .title{
    color: #3C4458;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    font-weight: bold;
  }
  .l-row{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    line-height: 20px;
    box-sizing: border-box;
    color: #3C4458;
    font-size: 14px;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #D8DCE3;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &:last-child::after{
      height: 0;
    }
    &.selected{
      color: #16BC83;
      font-weight: bold;
    }
    .icon-sel{
      width: 30px;
      height: 21px;
    }
  }
}
</style>
